<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#show {
				line-height: 2.8;
				color: #FFFFFF;
				font-size: 50px;
				padding-left: 25px;
			}

			.a {
				background-image: url(img/five/clock.png);
				width: 240px;
				height: 146px;
			}

			.b {
				background-image: url(img/five/cald.png);
				width: 150px;
				height: 138px;
			}

			.font1 {
				font-size: 25px;
				color: #FFFFFF;
				padding-left: 35px;
			}

			.font2 {
				font-weight: bolder;
				font-size: 75px;
				color: #000000;
				padding-left: 28px;
			}
		</style>
	</head>
	<body>
		<div class="b">
			<font class="font1"></font>
			<font class="font2"></font>
		</div>
		<br>
		<div class="a">
			<font id="show"></font>
		</div>

		<script type="text/javascript">
			window.setInterval("showtime()", 1000);

			function showtime() {
				var mytime = new Date();
				// console.log(Date());
				var h = mytime.getHours();
				var m = mytime.getMinutes();
				var s = mytime.getSeconds();
				if (h < 10) {
					var str = "0" + h + ":" + m + ":" + s;
				} else if (m < 10) {
					var str = h + ":0" + m + ":" + s;
				} else if (s < 10) {
					var str = +h + ":" + m + ":0" + s;
				} else {
					var str = h + ":" + m + ":" + s;
				}
				document.querySelector("#show").innerHTML = str;
			}
			window.setTimeout("date()");

			function date() {
				var mytime = new Date();
				var x = mytime.getDay();
				var r = mytime.getDate();
				var chinese = ['0', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
				for (var i = 1; i <= 7; i++) {		
					if (x==i) {
						x=chinese[i];
					}
				}
				console.log(x);
				document.querySelector(".font1").innerHTML = x;
				document.querySelector(".font2").innerHTML = r;
			}
		</script>
	</body>
</html>
